<script setup lang="ts">
import { UserInfo, SubSystemModel } from '@/api/login/types'
import { useUserStoreWithOut } from '@/store/modules/user'
import { watch, ref } from 'vue'
const userStore = useUserStoreWithOut()
const subSystem: SubSystemModel[] = ref([])
import { useRouter } from 'vue-router'

const { replace } = useRouter()
const load = (user) => {
  if (user != null) {
    subSystem.value = user.SubSystem
  } else {
    subSystem.value = []
  }
}
const switchSystem = (id) => {
  const home = userStore.setCurSysId(id)
  if (home != null) {
    replace({ name: home.Name, params: home.Params })
  }
}
watch(
  () => userStore.user,
  (user: UserInfo) => {
    load(user)
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="main">
    <div class="mainBody">
      <ContentWrap title="我的待办" />
      <ContentWrap title="我的应用" style="width: 40%">
        <div class="appList">
          <div v-for="item in subSystem" :key="item.Id" class="app" @click="switchSystem(item.Id)">
            <span class="icon"> <Icon :icon="item.Icon" :isInherit="true" /></span>
            <span class="name">{{ item.Name }}</span>
          </div>
        </div>
      </ContentWrap>
    </div>
  </div>
</template>

<style scoped>
.main {
  width: 100%;
  text-align: center;
}
.mainBody {
  max-width: 1900px;
  padding: 20px;
  width: 100%;
  display: inline-block;
}
.mainBody .el-card {
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
}
.appList {
  width: 100%;
  display: inline-block;
}
.app {
  display: inline-block;
  width: 120px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  cursor: pointer;
}
.app:hover {
  background-color: #f5f4f4b5;
  border-color: #1890ff;
}
.app .icon {
  display: inline-block;
  width: 100%;
  font-size: 2.5rem;
  line-height: 50px;
  text-align: center;
}
.app .name {
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 30px;
}
</style>
